<template>
    <div>
        <h1 class="demo2" v-text="message"></h1>
        <!-- 编写组件标签 -->
        <Student name="张三" :age="18" sex="男"></Student>
        <hr/>
        <h1 class="demo2">人员列表</h1>
        <ul class="persons">
            <li>姓名    性别    年龄</li>
            <li v-for="(person,index) in persons" :key="index">
                {{person.name}}    {{person.sex}}     {{person.age}}
            </li>
        </ul>
    </div>
</template>

<script>
    //导入Student组件
    import Student from './components/Student.vue'
    //暴露组件
    export default {
        name: 'App',
        components:{
            Student
        },
        data(){
           return {
                message: '欢迎学习Vue教程！',
                persons:[
                    {name:'萧炎',sex:'男',age:18},
                    {name:'萧薰儿',sex:'女',age:16},
                    {name:'唐三',sex:'男',age:20},
                    {name:'小舞',sex:'女',age:17}
                ]
           }
        }
    }
</script>

<style>
    .demo2{
        background-color: green;
        text-align: center;
    }
    li{
        list-style-type: none;/*去除列表的小黑点*/
        text-align: center;
    }
</style>